<template>
  <div
    class="desc-item"
    :class="{ 'desc-inline': inline }"
    :style="{ flex: span }"
  >
    <div class="desc-label" :style="labelStyle">
      <slot name="label">{{ label }}</slot>
    </div>
    <div class="desc-value" :style="valueStyle">
      <slot>{{ data?.[prop] || '--' }}</slot>
    </div>
  </div>
</template>

<script setup name="DescItem">
defineProps({
  data: Object,
  label: String,
  prop: String,
  span: {
    // 占的列数，请设为整数
    type: Number,
    default: 1,
  },
  inline: Boolean,
  labelStyle: Object,
  valueStyle: Object,
})
</script>

<style lang="scss" scoped>
.desc-item {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
  border-left: 1px solid #efefef;
  &.desc-inline {
    display: flex;
    .desc-label {
      width: 90px;
      margin-right: 10px;
    }
    .desc-value {
      flex: 1;
    }
  }
  &:first-child {
    padding-left: 0;
    border-left: none;
  }
  &:last-child {
    padding-right: 0;
  }
  .desc-label {
    margin-top: 10px;
    padding-top: 5px;
    color: #ccc;
  }
  .desc-value {
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #666;
    word-break: break-all;
  }
}
</style>
